<template>
<div class="homepage-hero-module">
    <div class="video-container">   
        <el-form :model="form" :rules="rules" ref="form" autoComplete="on"  label-width="80px" >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input  v-model="form.email" placeholder="请输入邮箱" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="code">
                <el-col :span="11">
                    <el-input  v-model="form.code" placeholder="请输入验证码" ></el-input>
                </el-col>
                <el-col class="line" :span="2"></el-col>
                <el-col :span="11">
                    <el-button @click="getCode()">发送验证码</el-button>
                </el-col>
            </el-form-item>
            <el-form-item  label="密码" placeholder="请输入密码" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item  label="确认密码" placeholder="请重新输入密码" prop="password_confirm">
                <el-input type="password" v-model="form.password_confirm"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select class="filter-item" v-model="form.sex" placeholder="请选择">
                    <el-option v-for="item in  sexOptions" :key="item" :label="item" :value="item"> </el-option>
                </el-select>
            </el-form-item>i
            <el-button type="primary" @click="handleRegister('form')">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
    </el-form>

    <div :style="fixStyle" class="filter"></div>
        <!-- <video autoplay loop muted playsinline src="/assets/images/register" class="fillWidth"></video> -->
        <video :style="fixStyle" autoplay loop muted playsinline  v-on:canplay="canplay">
        <!-- <source src="PATH_TO_MP4" type="video/mp4"/> -->
        <!-- <source src="PATH_TO_WEBM" type="video/webm"/> -->
        <source type="video/mp4" src="../../assets/images/register.mp4" />
         </video>
        <!-- <div class="poster hidden" v-if="!vedioCanPlay"> -->
        <!-- <img :style="fixStyle" src="PATH_TO_JPEG" alt=""> -->
        
        <img :style="fixStyle" src="../../assets/images/login-bg.jpg" alt="">
       <!-- </div> -->
    </div>
  </div>

</template>

<script>
import socialSign from '../login/socialsignin';
import JsEncrypt from 'jsencrypt'
  
import {
 getPublicKey 
} from 'api/login';


export default {
  components: {
    socialSign
  },
  name: 'login',
  data() {
      //外置校验方法
      var validatoremail = (rule, value, callback) => {       
        var regEmail =  /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (value === '') {
          callback(new Error('请输入邮箱'));
        } else  {
            if (!regEmail.test(this.form.email)) {
                    callback(new Error('邮箱格式不正确'));
            }
          callback();
        }
      };
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form.password_confirm !== '') {
            this.$refs.form.validateField('password_confirm');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
        vedioCanPlay: false,
        fixStyle: '',
      publicKey:"",

      form: {
        name: undefined,
        email: undefined,
        code: undefined,
        sex: '男',
        password: undefined,
        password_confirm: undefined
      },
      rules: {
        // 内置校验写法
        name: [
            { required: true, message: '请输入用户',trigger: 'blur' },
            {min: 3,max: 20,message: '长度在 3 到 20 个字符',trigger: 'blur'}
        ],
        email: [
             { required: true, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        //外放校验写法
        password: [
            { validator: validatePass, trigger: 'blur' }
        ],
        password_confirm: [
            { validator: validatePass2, trigger: 'blur' }
        ],
      },
      loading: false,
      showDialog: false,
      sexOptions: ['男', '女'],
    }
  },

  computed: {
   
  },

  methods: { 
    getPublicKey(){//获取公钥
      getPublicKey().then(response => {
        this.publicKey = response.data;  
      });
    },
    // 公钥加密函数，
    encrypt(message,publicKey){  
      var encrypt =new JSEncrypt();//不知道能不能这么用
      encrypt.setPublicKey(this.publicKey);	//	 publicKey为公钥
      return encrypt.encrypt(message);  
    },
    handleRegister(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          }
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
     getCode() {
      alert(this.form.email+'已发送验证码');
    },
    afterQRScan() {
    },
    canplay() {
          
        this.vedioCanPlay = true
       
    },
     mounted: function() {
         alert('canplay');
        window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    }
  },
  created() {
     this.getPublicKey()
    // window.addEventListener('hashchange', this.afterQRScan);
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan);
  }
}
</script>
<style scoped>
 
  .homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
  }

  .no-video .video-container video,
  .touch .video-container video {
    display: none;
  }

  .no-video .video-container .poster,
  .touch .video-container .poster {
    display: block !important;
  }

  .video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
  }

  .video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
  }

  .video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
  }

  .video-container video.fillWidth {
    width: 100%;
  }
</style>